<template>
  <div>
    <div class="top-nav">
      <i class="el-icon-arrow-left"  @click="$router.go(-1)"></i>
      <div class="title">搜索结果</div>
    </div>
    <div class="list">
        <router-link class="wrapper"
        tag="div"
        v-for="(item,index) in list"
        :key='item.id'
        :to="`/player/${list[index].id}/${list[index].name}/${encode(list[index].album.artist.img1v1Url)}`"
        >
          <div class="index">{{index+1}}</div>
          <div class="name">{{item.name}}</div>
          <div class="artist">{{item.artists[0].name}}</div>
        </router-link>
      </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      keyWords:this.$route.params,
      list:[],
    }
  },
  methods: {
    encode(url) {
      if(url) return encodeURIComponent(url)
    }
  },
  mounted() {
    this.$api.getResult({
				keywords:this.keyWords
			}).then(res => {
        this.list = res.result.songs
				console.log(res)
				console.log(this.list)
			});
  },
}
</script>

<style lang="less" scoped>
.top-nav {
  display: grid;
  grid: 1fr /1fr 1fr 1fr;
  align-items: center;
  i {
    font-size: 1.2em;
    padding: 10px 10px;
  }
  .title {
    margin: 0 auto;
    font-size: 1.2em;
  }
}
.wrapper {
    background-color: rgb(236, 236, 236);
    height: 3em;
    align-items: center;
    display: flex;
    .index {
      width: 4em;
      text-align: center;
      color: rgb(85, 85, 85);
    }
    .name {
      font-size: 1.2em;
      flex: 1;
    }
    .artist {
      position: relative;
      right: 5%;
    }
}
.list > .wrapper:nth-child(odd) {
  background-color: rgb(217, 217, 217);
}
</style>